<template>
  <div class="fourth">
    <header>
      <svg @click="goNext" class="icon" aria-hidden="true">
        <use xlink:href="#icon-sggg"></use>
      </svg>
      <svg class="icon" @click="goSearch" aria-hidden="true" v-if="!search">
        <use xlink:href="#icon-sousuo"></use>
      </svg>
      <span v-else @click="goSearch">取消</span>
    </header>
    <div v-if="!search" class="content">
      <h3>选择你想援助的公益组织:</h3>
      <div class="wrapper">
        <div class="logo">
          <img v-for="index in 8" src="/static/images/fupin.png" @click="toActive(index)" :key="index" :class="[index === active ? 'active' : '']">
        </div>
      </div>
    </div>
    <div v-else class="content">
      <input class="searchBox" type="text" v-model="searchWords" placeholder="搜索公益组织">
    </div>
  </div>
</template>

<script>
export default {
  name: 'tutorialFourth',
  data () {
    return {
      active: -1,
      vuegConfig: {
        disable: false,
        forwardAnim: 'fadeInRight',
        backAnim: 'fadeInLeft'
      },
      search: false,
      searchWords: ''
    }
  },
  methods: {
    toActive (index) {
      this.active = index
    },
    goSearch () {
      this.search = !this.search
    },
    goNext () {
      this.$router.push({
        name: 'tutorialFifth'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.fourth {
  background-color: #fff;
}
header {
  flex: none;
  width: 100%;
  height: 98px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  span {
    padding: 0 30px;
    font-size: 38px;
    color: #007aff;
    cursor: pointer;
  }
  .icon {
    cursor: pointer;
    width: 50px;
    height: 50px;
    padding: 0 30px;
    color: #999999;
  }
}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  h3 {
    flex: 0;
    font-size: 48px;
    width: 540px;
    margin: 0 auto;
    font-weight: normal;
  }
  .wrapper {
    flex: 1;
    height: 85vh;
    overflow: scroll;
  }
  .logo {
    margin: 0 75px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 30px;
    img {
      margin-top: 40px;
      width: 280px;
      height: 280px;
      border: 1px solid #333333;
      &.active {
        box-shadow: 0 0 0 8px #3d68be;
      }
    }
  }
  .searchBox {
    display: block;
    caret-color: #426bf2;
    font-size: 48px;
    max-width: 400px;
    outline: none;
    &::-webkit-input-placeholder,
    &::-ms-input-placeholder {
      font-size: 48px;
      color: #999;
    }
    border: 0px;
  }
}
</style>